<template>
  <div id="test_app" style="width: 100%">
    <!--echarts的容器-->
    <el-card style="width: 280px;height:360px ;margin: 30px 20px 20px 30px;text-align: center;display: inline-block" >
      <el-table :data="pcmMaterialRecord" >
        <el-table-column width="155" label="报价商品数" prop="productName"/>
        <el-table-column label="" align="center"  >
          <template slot-scope="scope">
            <span style="display:inline-block;width: 35px;height: 35px;background-color: #eaf2fd;color: #2f7deb;border-radius: 30px;line-height: 35px" >1</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card style="width: 280px;height:360px ;margin: 30px 20px 20px 30px;text-align: center;display: inline-block">
     <el-form>
       <el-form-item label="报价次数分布"/>
       <div class="echart" id="mychart" :style="myChartStyle"></div>
     </el-form>
    </el-card>
    <el-card style="width: 500px;height:360px ;margin: 30px 20px 20px 30px;text-align: center;display: inline-block">
      <el-form>
        <el-form-item label="商品报价均值"/>
        <div class="echart" id="mychart2" :style="myChartStyle"></div>
      </el-form>
    </el-card>
    <el-card style="width: 440px;height:360px ;margin: 30px 20px 20px 30px;text-align: center;display: inline-block">
      <el-form>
        <div class="echart" id="main" style="width: 100%;height: 350px;background:#fff"></div>
      </el-form>
    </el-card>
    <el-card style="width: 370px;height:110px ;margin: 30px 20px 20px 30px;text-align: left;display: inline-block">
      <el-form>
        <el-form-item label="询报价需求编号"/>
        <el-select v-model="value" filterable placeholder="请选择" style="width: 100%;" @focus="selInquiry">
          <el-option
            v-for="item in optionInquiry"
            :label="item.inquiryDemandNumber"
            :value="item.inquiryDemandNumber">
          </el-option>
        </el-select>
      </el-form>
    </el-card>
    <el-card style="width: 370px;height:110px ;margin: 30px 20px 20px 30px;text-align: left;display: inline-block">
      <el-form>
        <el-form-item label="产品编号"/>
        <el-select v-model="value2" filterable placeholder="请选择" style="width: 100%;" @focus="selProNumber">
          <el-option
            v-for="item in optionInquiry2"
            :label="item.productNumber"
            :value="item.productNumber">
          </el-option>
        </el-select>
      </el-form>
    </el-card>
    <el-card style="width: 370px;height:110px ;margin: 30px 20px 20px 30px;text-align: left;display: inline-block">
      <el-form>
        <el-form-item label="产品名称"/>
        <el-select v-model="value3" filterable placeholder="请选择" style="width: 100%;" @focus="selProName">
          <el-option
            v-for="item in optionInquiry3"
            :label="item.productName"
            :value="item.productName">
          </el-option>
        </el-select>
      </el-form>
    </el-card>
    <el-card style="width: 370px;height:110px ;margin: 30px 20px 20px 30px;text-align: left;display: inline-block">
      <el-form>
        <el-form-item label="报价供应商"/>
        <el-select v-model="value4" filterable placeholder="请选择" style="width: 100%;" @focus="selSupplier">
          <el-option
            v-for="item in optionInquiry4"
            :label="item.supplierFullName"
            :value="item.supplierFullName">
          </el-option>
        </el-select>
      </el-form>
    </el-card>
    <el-card shadow="always" style="height: 59px;text-align: center;margin: 0px 0px 20px 30px">
      <h2 style="color:#1890ff;">按照物料比价</h2>
    </el-card>
    <el-card style="width:100%;height:360px ;margin: 0px 20px 20px 30px;text-align: left;display: inline-block">
      <div>
      <el-form>
        <el-form-item label="物料维度比价表"></el-form-item>
        <el-table border align="center" style="width: 1700px" :data="from">

          <el-table-column align="center" width="150" sortable label="询报价需求编号" prop="inquiryDemandNumber"/>
          <el-table-column align="center" width="150" sortable label="采购申请编号" prop="purchaseRequestId"/>

          <el-table-column align="center" width="75" sortable label="行号" prop="demandLineNumber"/>
          <el-table-column align="center" width="150" sortable label="产品编号" prop="productNumber"/>
          <el-table-column align="center" width="150" sortable label="产品名称" prop="productName"/>
          <el-table-column align="center" width="75" sortable label="单位" prop="unit">
            <template slot-scope="scope">
              <dict-tag  :options="dict.type.sys_unit" :value="scope.row.unit"/>
            </template>
          </el-table-column>
          <el-table-column align="center" width="98" sortable label="需求数量" prop="requiredQuantity"/>
          <el-table-column align="center" width="150" sortable label="供应商全称" prop="supplierFullName"/>
          <el-table-column align="center" width="98" sortable label="最终价格" prop="finalprice"/>
          <el-table-column align="center" width="150" sortable label="期望到货时间" prop="expectedDeliveryDate"/>
          <el-table-column align="center" width="150" sortable label="预计到货时间" prop="estimatedDeliveryTime"/>
          <el-table-column align="center" width="120" sortable label="第一次价格" prop="firstQuotation"/>
          <el-table-column align="center" width="120" sortable label="第二次价格" prop="secondQuotation"/>
          <el-table-column align="center" width="120" sortable label="第三次价格" prop="thirdQuotation"/>
          <el-table-column align="center" width="150" sortable label="报价截止时间" prop="quoteDeadline"/>

        </el-table>
      </el-form>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      </div>
    </el-card>
    <el-card shadow="always" style="height: 59px;text-align: center;margin: 0px 0px 20px 30px">
      <h2 style="color:#1890ff;">按照供应商比价</h2>
    </el-card>
    <el-card style="width:100%;height:360px ;margin: 0px 20px 20px 30px;text-align: left;display: inline-block">
      <el-form>
        <el-form-item label="供应商维度比价表"></el-form-item>
        <el-table border align="center" style="width: 1700px" :data="from">

          <el-table-column align="center" width="150" sortable label="询报价需求编号" prop="inquiryDemandNumber"/>
          <el-table-column align="center" width="150" sortable label="采购申请编号" prop="purchaseRequestId"/>
          <el-table-column align="center" width="150" sortable label="供应商全称" prop="supplierFullName"/>
          <el-table-column align="center" width="75" sortable label="行号" prop="demandLineNumber"/>
          <el-table-column align="center" width="150" sortable label="产品编号" prop="productNumber"/>
          <el-table-column align="center" width="150" sortable label="产品名称" prop="productName"/>
          <el-table-column align="center" width="75" sortable label="单位" prop="unit">
            <template slot-scope="scope">
              <dict-tag  :options="dict.type.sys_unit" :value="scope.row.unit"/>
            </template>
          </el-table-column>
          <el-table-column align="center" width="98" sortable label="需求数量" prop="requiredQuantity"/>
          <el-table-column align="center" width="98" sortable label="最终价格" prop="finalprice"/>
          <el-table-column align="center" width="150" sortable label="期望到货时间" prop="expectedDeliveryDate"/>
          <el-table-column align="center" width="150" sortable label="预计到货时间" prop="estimatedDeliveryTime"/>
          <el-table-column align="center" width="120" sortable label="第一次价格" prop="firstQuotation"/>
          <el-table-column align="center" width="120" sortable label="第二次价格" prop="secondQuotation"/>
          <el-table-column align="center" width="120" sortable label="第三次价格" prop="thirdQuotation"/>
          <el-table-column align="center" width="150" sortable label="报价截止时间" prop="quoteDeadline"/>

        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-form>
    </el-card>
<!--    <div id="main" style="width: 100%;height: 520px;background:#fff"></div>-->
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { listRecord, getRecord, delRecord, addRecord, updateRecord } from "@/api/material/record";
import {getCheck,addPrice,selPro,selInq,selProNum,selProNa,selSup,selsupquo} from "@/api/inquiry/check";
import dict from "@/utils/dict";
export default {
  dicts: ['pcm_supplier_states','sys_type_purchase','demand_line_status','sys_unit','sys_sup_cat'],
  name: '',
  data() {
    return {
      charts: '',
      opinionData: [],//数据最大值
      opinionData2:[],
      pcmMaterialRecord:'',
      xData: [], //横坐标
      yData: [], //数据
      yData2:[],//横向柱状图数据
      myChartStyle: { float: "right", width: "100%", height: "340px" }, //图表样式
       optionInquiry:[],
      optionInquiry2:[],
      optionInquiry3:[],
      optionInquiry4:[],
      value:[],
      value2:[],
      value3:[],
      value4:[],
      from:[],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total:0
    }
  },
  created() {
    this.getList();
  },
  methods: {
    async getList(){
      listRecord().then(res=>{
        this.pcmMaterialRecord=res.rows;
        console.log(this.pcmMaterialRecord)
      });
      await selPro().then(res=>{
        const ass=res.rows
        ass.forEach(e=>{
          console.log(e)
          this.xData.push(e.productName);
          this.yData.push(e.sa);
          this.yData2.push(e.pj);
          this.opinionData.push(e.ma)
          this.opinionData2.push(e.mi)
        })
        this.initEcharts();
        this.$nextTick(function() {
          this.drawLine('main')
        });
      })
      selsupquo().then(res=>{
        this.from=res.rows
        this.total=res.total
      })
    },
    //查询全部发起询价的询报价需求编号
    selInquiry(){
      selInq().then(res=>{
        this.optionInquiry=res.rows;
        console.log(121212)
        console.log(this.optionInquiry)
      })
    },
    selProNumber(){
      selProNum().then(res=>{
        this.optionInquiry2=res.rows;
        console.log(121212)
        console.log(this.optionInquiry)
      })
    },
    selProName(){
      selProNa().then(res=>{
        this.optionInquiry3=res.rows;
        console.log(121212)
        console.log(this.optionInquiry)
      })
    },
    selSupplier(){
      selSup().then(res=>{
        this.optionInquiry4=res.rows;
        console.log(121212)
        console.log(this.optionInquiry)
      })
    },
    // selInquiry(){
    //   selInq().then(res=>{
    //     this.optionInquiry=res.rows;
    //     console.log(121212)
    //     console.log(this.optionInquiry)
    //   })
    // },
    initEcharts() {
      // 基本柱状图
      const option = {
        xAxis: {
          data: this.xData,
          max:4
        },
        yAxis: {

        },
        series: [
          {
            type: "bar", //形状为柱状图
            data: this.yData
          }
        ]
      };
      const option2 = {
        xAxis: {

        },
        yAxis: {
          data: this.xData,
          max:4
        },
        series: [
          {
            type: "bar", //形状为柱状图
            data: this.yData2
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);
      const myChart2 = echarts.init(document.getElementById("mychart2"));
      myChart2.setOption(option2);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
        myChart2.resize();
      });
    },

    drawLine(id) {
      this.charts = echarts.init(document.getElementById(id))
      this.charts.setOption({
        title:{
          left:'3%',
          top:'5%',
          text:"最大值最小值",//标题文本，支持使用 \n 换行。
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          align:'right',//文字在前图标在后
          left:'3%',
          top:'15%',
          data: ['最终价格']
        },
        grid: {
          top:'30%',
          left: '5%',
          right: '5%',
          bottom: '5%',
          containLabel: true
        },

        toolbox: {
          feature: {
            saveAsImage: {} //保存为图片
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap:true,
          axisTick:{
            alignWithLabel:true //保证刻度线和标签对齐
          },
          data: this.xData //x坐标的名称
        },
        yAxis: {
          axisTick:{
            alignWithLabel:true //保证刻度线和标签对齐
          },
          // type: 'value',
          // boundaryGap: true,
          // splitNumber:4, //纵坐标数
          // interval:250 //强制设置坐标轴分割间隔
        },

        series: [{
          name: '最小值',
          type: 'line', //折线图line;柱形图bar;饼图pie
          stack: '总量',
          data: this.opinionData2
        },
          {
            name: '最大值',
            type: 'line', //折线图line;柱形图bar;饼图pie
            stack: '总量',
            data: this.opinionData
          }
        ]
      })
    }
  },
  //调用
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
::v-deep .el-table .cell{
  line-height: 35px;
}
</style>
